<template>
  <div v-if="cates.length===0" class="skeleton" style="width:100%">
    <img src="../../../images/fl.svg" alt="" style="width:100%;height:auto">
  </div>
  <div v-else class="grid-box">
    <div class="cate-item" 
      v-for="cate in cates" :key="cate.id" 
      @touchstart="touchstart" @touchend="touchend($event,cate)" >
      <img class="cate-img" :src="cateImgOrigin+cate.image_url" alt="">
      <span>{{cate.title}}</span>
    </div>
  </div>
</template>
<script>
let startTouchX = 0
export default {
  props:{
    geohash:String,
    cates:Array,
  },
  data(){
    return {
      cateImgOrigin:'https://fuss10.elemecdn.com/'
    }
  },
  methods:{
    // 导航
    navFood(cate){
      this.$router.push({path:'/food',query:{
        geohash:this.geohash, 
        id:cate.id,
        title:cate.title
      } })
    },
    touchstart(e){
      startTouchX = e.changedTouches[0].pageX
    },
    touchend(e,cate){
      const distance = startTouchX - e.changedTouches[0].pageX
      // console.log(distance);
      if(distance>=-2 && distance<=2){
        this.navFood(cate)
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.grid-box{
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 20px;
  .cate-item{
    display: block;
    width: 25%;
    padding: .07rem 0;
    .cate-img{
      width: .42rem;
      height: auto;
      margin: 0 auto .07rem;
      display: block;
    }
    span{
      display: inline-block;
      width: 100%;
      text-align: center;
    }
  }
}
</style>